<style lang="less">
@import '../style.less';
</style>
<template>
	<div class="material">
		<div class="op-header">
			<span>
				<el-button @click="addEvidence" class="add" type="info">
					<i class="el-icon-circle-plus icon-right"/>新增模版
				</el-button>
				<el-button @click="addCitation=true" class="add" type="primary">
					<i class="el-icon-circle-plus icon-right"/>传票翻打数据上传
				</el-button>
				<el-button @click="downloadCitation" class="add" type="primary">
					<i class="el-icon-circle-plus icon-right"/>传票翻打固定模板
				</el-button>
			</span>
			<div class="search">
				<el-select :clearable="true" class="enable-select" placeholder="启用状态" v-model="enabled">
					<el-option label="启用" value="true"/>
					<el-option label="停用" value="false"/>
				</el-select>
				<el-cascader
					:clearable="true"
					:options="evidenClasses"
                    change-on-select
                    :show-all-levels="false"
					:props="{ value: 'id', label: 'name', children: 'subClasses' }"
					class="class-select"
					placeholder="全部分类"
					v-model="classIds"
					width="10"
				/>
				<el-input class="search-input" placeholder="请输入查询关键字" prefix-icon="el-icon-search" v-model="name"/>
				<el-button @click="searchEvidences" class="search-button" type="primary">
					<i class="el-icon-search icon-right"/>查询
				</el-button>
			</div>
		</div>
		<table-ex
			:columns="columns"
			:on-operation="onClickOperation"
			:on-option="onClickOption"
			:on-page-change="onPageChange"
			:options="options"
			:rows="evidences"
			:total="evidenTotal"
		/>
		<dialog-ex
			:ctrl-values="{ classIds: this.evidenClasses }"
			:form="form"
			:init="currentEvidence"
			:mode="dialogMode"
			:title="dialogMode === 'add' ? '新增凭证模版' : '编辑凭证模版'"
			v-if="dialogMode"
		/>
		<eviden-editor
			:form="editorForm"
			:init="currentEvidence"
			:modal="true"
			:mode="'edit'"
			:title="'凭证信息'"
			v-if="editorMode"
		/>
		<dialog-ex
			:form="upfileform"
			:uploadParams="''"
			@uploadSuccess="upFileSuccess()"
			title="传票翻打数据上传"
			v-if="addCitation"
		/>
	</div>
</template>

<script>
import { mapGetters, mapActions, mapMutations } from 'vuex'
import dialogEx from '@/components/dialog/dialogEx'
import tableEx from '@/components/table/tableEx'
import evidenceEditor from './evidenceEditor'
import pageConfig from '../config'

export default {
  name: 'evidence',
  components: {
    'table-ex': tableEx,
    'dialog-ex': dialogEx,
    'eviden-editor': evidenceEditor
  },
  data() {
    return {
      name: '',
      enabled: 'true',
      addCitation: false,
      classIds: [],
      currentEvidence: null,
      dialogMode: null,
      columns: pageConfig.evidence.columns,
      options: pageConfig.evidence.options,
      form: {
        mediaType: 'image',
        items: pageConfig.evidence.formItems,
        default: { enabled: true },
        actions: {
          cancel: () => (this.dialogMode = null),
          confirm: (data, mode) => {
            this.onConfirm(data, mode)
            this.dialogMode = null
          },
          delete: item => console.log(item)
        }
      },
      upfileform: {
        items: pageConfig.evidence.formfile,
        actions: {
          cancel: () => (this.addCitation = false),
          confirm: (data, mode) => {
            this.addCitation = false
          }
        }
      },
      editorMode: null,
      editorForm: {
        actions: {
          cancel: () => {
            this.editorMode = null
          },
          confirm: (result, action) => {
            this.editorMode = null
          }
        }
      },
      removeIconId: null
    }
  },
  computed: {
    ...mapGetters(['evidenClasses', 'evidences', 'evidenTotal'])
  },
  created() {},
  mounted() {
    this.loadInitData()
  },
  methods: {
    ...mapActions([
      'getEvidenceClasses',
      'getEvidences',
      'saveEvidence',
      'getEvidence',
      'removeEvidences',
      'removeIcon'
    ]),
    ...mapMutations(['setEvidenPage']),
    loadInitData() {
      this.getEvidenceClasses()
      this.getEvidences()
    },
    addEvidence() {
      this.dialogMode = 'add'
    },
    // addCitation() {},
    downloadCitation() {
      window.location.href = '/api/csv_template'
    },
    searchEvidences() {
      this.setEvidenPage({
        number: 1,
        filter: {
          name: this.name,
          enabled: this.enabled,
          classIds: this.classIds
        }
      })
      this.getEvidences()
    },
    onPageChange(number) {
      this.setEvidenPage({ number })
      this.getEvidences()
    },
    batchOption() {},
    imageBeforeUpload(res) {
      if (this.evidenceImages) {
        for (let image of this.evidenceImages) {
          if (res.name === image.originFileName) {
            MessageBox.confirm('文件上传重复', '错误', {
              confirmButtonText: '关闭',
              type: 'error',
              showCancelButton: false
            })
            return false
          }
        }
      }
      return true
    },
    upFileSuccess() {
      this.addCitation = false
    },
    onClickOption(option, rows) {
      if (option === 'refresh') {
        this.loadInitData()
      }
      console.log(option, rows)
    },
    onClickOperation(oper, row) {
      if (oper.prop === 'edit') {
        this.currentEvidence = row
        this.dialogMode = 'edit'
      } else if (oper.prop === 'delete') {
        this.removeEvidences([row.id])
      } else if (oper.prop === 'eviden-edit') {
        this.currentEvidence = row
        this.editorMode = 'edit'
      } else {
        console.log('onClickOperation:', oper.prop, oper.label, row)
      }
    },
    onConfirm(data, mode) {
      this.removeIconId && this.removeIcon(this.removeIconId)
      this.removeIconId = null
      this.saveEvidence(data)
    },
    onIconDeletle(fileId) {
      this.removeIconId = fileId
    }
  }
}
</script>